import React, {Component} from 'react';
import {Menu, Icon, Layout, Row, Col} from 'antd';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import Clock from './Clock';
import * as images from '../style/imgs';
import {fetchData} from '@/action';
import {get}  from '../axios/tools';
import {LOGOUT} from '../axios/config';

import {REQUEST_SUCCESS} from '../common/const'
require('./headerCustomer.css');


const {Header} = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
var inconStyle = {
    color: '#424c5e'
};

class HeaderCustom extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: '',
            visible: false,
            date: new Date()
        };
    }

    componentDidMount() {
        const _user = JSON.parse(localStorage.getItem('user')) || '测试';
        this.setState({
            user: _user
        });
    }

    menuClick = e => {
        e.key == 'logout' && this.logout();
    };
    changePassword = () => {
        this.props.history.push('/app/system/changePwd');
    }
    logout = () => {
        get({url:LOGOUT}).then((res) => {
            if (res && REQUEST_SUCCESS == res.code) {
                localStorage.removeItem('user');
                localStorage.setItem('logout','logout');
                this.props.history.push('/login');
            }
        })
    };
    popoverHide = () => {
        this.setState({
            visible: false,
        });
    };
    handleVisibleChange = (visible) => {
        this.setState({visible});
    };

    render() {
        /*const {responsive, path} = this.props;*/
        return (
            <Row>
                <Header style={{background: '#fff', padding: 0, height: 54, maxHeight: 54, minHeight: 54}}
                        className="custom-theme">
                    <Col>
                        <div className="wps-logo"
                             style={{float: 'left', paddingLeft: '20px', height: 54, lineHeight: '54px'}}>
                            <img src={images['headerLogo']} height={24}/>
                            <span style={{
                                fontFamily: '"微软雅黑 Bold", "微软雅黑"',
                                fontSize: 18,
                                fontWeight: 700,
                                fontStyle: 'normal',
                                color: 'white',
                                verticalAlign: 'middle',
                                paddingLeft: '10px'
                            }}>升级服务管理后台</span>
                        </div>
                    </Col>
                    <Col>
                        <Menu
                            mode="horizontal"
                            style={{lineHeight: '54px', float: 'right', height: 54, maxHeight: 54, minHeight: 54}}
                            onClick={this.menuClick}
                        >
                            {/*<Menu.Item key="full" onClick={this.screenFull} >
                        <Icon type="arrows-alt" onClick={this.screenFull} />
                    </Menu.Item>*/}
                            <Menu.Item key="systemTime" className={'hover-no-change'}>
                                <Clock/>
                            </Menu.Item>
                            <SubMenu
                                title={<span>当前用户:{(this.state.user.username || "未登录")}<span style={inconStyle}><Icon
                                    type="caret-down"/></span></span>}>
                                <MenuItemGroup>
                                    <Menu.Item onClick={this.changePassword}>修改密码</Menu.Item>
                                    <Menu.Item onClick={this.logout}>注销</Menu.Item>
                                </MenuItemGroup>
                            </SubMenu>
                            <Menu.Item key="version" className={'hover-no-change'}>
                                [v4.0]
                            </Menu.Item>
                        </Menu>
                    </Col>
                    <style>{`
                    .ant-menu-submenu-horizontal > .ant-menu {
                        width: 120px;
                        left: -40px;
                    }
                `}</style>
                </Header>
            </Row>
        )
    }
}

const mapStateToProps = state => {
    const {responsive = {data: {}}} = state.httpData;
    return {responsive};
};
const mapDispatchToProps = dispatch => ({
    fetchData: bindActionCreators(fetchData, dispatch),
});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(HeaderCustom));
